<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>08-银行卡余额</title>
    <style>
      h2 {
        text-align: center;
      }
      table {
        border-collapse: collapse;
        height: 80px;
        margin: 0 auto;
        text-align: center;
      }
      th {
        padding: 5px 30px;
      }
      table,
      th,
      td {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <h2>2023年8月消费支出</h2>
    <script>
      let zonge = +prompt("银行卡总额");
      let shuifei = +prompt("水费");
      let dianfei = +prompt("电费");
      let wangfei = +prompt("网费");
      let yue = zonge - (shuifei + dianfei + wangfei);

      document.write(`
            <table>
        <tr>
            <th>银行卡总额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </tr>
        <tr>
            <td>${zonge}元</td>
            <td>${shuifei}元</td>
            <td>${dianfei}元</td>
            <td>$${wangfei}元</td>
            <td>${yue}元</td>
        </tr>
    </table>
        `);
    </script>
  </body>
</html>
